<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-gray-600 to-gray-700 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">帮助中心</h1>
                <button onclick="searchHelp()" class="text-white hover:opacity-80">
                    <i class="fas fa-search text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Search Bar -->
        <div class="px-4 py-3 bg-gradient-to-r from-gray-600 to-gray-700">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="flex items-center text-white">
                    <i class="fas fa-search text-lg mr-3"></i>
                    <input type="text" placeholder="搜索帮助内容..." class="flex-1 bg-transparent text-white placeholder-white/70 outline-none">
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-180px)] overflow-y-auto pb-20">
            <!-- Quick Help -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-gray-600 mr-2 rounded-full"></span>
                    快速帮助
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div onclick="openQuickGuide('getting-started')" class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-3 border border-blue-200 text-center cursor-pointer hover:border-blue-400 transition-all">
                        <i class="fas fa-play-circle text-2xl text-blue-600 mb-2"></i>
                        <p class="text-xs font-medium">新手入门</p>
                        <p class="text-xs text-gray-600 mt-1">5分钟快速上手</p>
                    </div>
                    <div onclick="openQuickGuide('product-management')" class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-3 border border-green-200 text-center cursor-pointer hover:border-green-400 transition-all">
                        <i class="fas fa-box text-2xl text-green-600 mb-2"></i>
                        <p class="text-xs font-medium">商品管理</p>
                        <p class="text-xs text-gray-600 mt-1">上架发布指南</p>
                    </div>
                    <div onclick="openQuickGuide('order-processing')" class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-3 border border-orange-200 text-center cursor-pointer hover:border-orange-400 transition-all">
                        <i class="fas fa-shopping-cart text-2xl text-orange-600 mb-2"></i>
                        <p class="text-xs font-medium">订单处理</p>
                        <p class="text-xs text-gray-600 mt-1">发货售后流程</p>
                    </div>
                    <div onclick="openQuickGuide('financial')" class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-3 border border-purple-200 text-center cursor-pointer hover:border-purple-400 transition-all">
                        <i class="fas fa-dollar-sign text-2xl text-purple-600 mb-2"></i>
                        <p class="text-xs font-medium">财务管理</p>
                        <p class="text-xs text-gray-600 mt-1">结算提现说明</p>
                    </div>
                </div>
            </div>

            <!-- FAQ Categories -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-gray-600 mr-2 rounded-full"></span>
                    常见问题
                </h3>
                <div class="space-y-3">
                    <!-- Store Management -->
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <div onclick="toggleFAQSection('store')" class="p-3 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-store text-indigo-600 text-lg mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium">店铺管理</p>
                                        <p class="text-xs text-gray-500">店铺设置、装修、运营</p>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-down text-gray-400 transition-transform" id="store-arrow"></i>
                            </div>
                        </div>
                        <div id="store-faq" class="hidden border-t border-gray-100">
                            <div onclick="openFAQ('store-setup')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">如何完善店铺基本信息？</p>
                            </div>
                            <div onclick="openFAQ('store-decoration')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">怎么装修店铺首页？</p>
                            </div>
                            <div onclick="openFAQ('store-operation')" class="p-3 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">店铺运营技巧有哪些？</p>
                            </div>
                        </div>
                    </div>

                    <!-- Product Management -->
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <div onclick="toggleFAQSection('product')" class="p-3 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-box text-green-600 text-lg mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium">商品管理</p>
                                        <p class="text-xs text-gray-500">上架、编辑、库存管理</p>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-down text-gray-400 transition-transform" id="product-arrow"></i>
                            </div>
                        </div>
                        <div id="product-faq" class="hidden border-t border-gray-100">
                            <div onclick="openFAQ('product-upload')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">如何批量上传商品？</p>
                            </div>
                            <div onclick="openFAQ('product-seo')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">商品标题和描述怎么写？</p>
                            </div>
                            <div onclick="openFAQ('inventory')" class="p-3 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">库存预警如何设置？</p>
                            </div>
                        </div>
                    </div>

                    <!-- Order Management -->
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <div onclick="toggleFAQSection('order')" class="p-3 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-shopping-cart text-orange-600 text-lg mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium">订单管理</p>
                                        <p class="text-xs text-gray-500">处理、发货、售后</p>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-down text-gray-400 transition-transform" id="order-arrow"></i>
                            </div>
                        </div>
                        <div id="order-faq" class="hidden border-t border-gray-100">
                            <div onclick="openFAQ('order-processing')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">订单处理流程是什么？</p>
                            </div>
                            <div onclick="openFAQ('shipping')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">如何设置物流配送？</p>
                            </div>
                            <div onclick="openFAQ('refund')" class="p-3 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">退换货怎么处理？</p>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Management -->
                    <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                        <div onclick="toggleFAQSection('finance')" class="p-3 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-dollar-sign text-purple-600 text-lg mr-3"></i>
                                    <div>
                                        <p class="text-sm font-medium">财务管理</p>
                                        <p class="text-xs text-gray-500">结算、提现、发票</p>
                                    </div>
                                </div>
                                <i class="fas fa-chevron-down text-gray-400 transition-transform" id="finance-arrow"></i>
                            </div>
                        </div>
                        <div id="finance-faq" class="hidden border-t border-gray-100">
                            <div onclick="openFAQ('settlement')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">资金结算周期是多久？</p>
                            </div>
                            <div onclick="openFAQ('withdrawal')" class="p-3 border-b border-gray-50 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">提现手续费怎么计算？</p>
                            </div>
                            <div onclick="openFAQ('invoice')" class="p-3 cursor-pointer hover:bg-gray-25">
                                <p class="text-sm text-gray-700">如何开具发票？</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Video Tutorials -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-gray-600 mr-2 rounded-full"></span>
                        视频教程
                    </span>
                    <span onclick="viewAllVideos()" class="text-gray-600 text-xs cursor-pointer hover:text-gray-700">
                        查看全部 <i class="fas fa-chevron-right text-xs"></i>
                    </span>
                </h3>
                <div class="space-y-3">
                    <div onclick="playVideo('onboarding')" class="bg-white rounded-lg border border-gray-200 p-3 cursor-pointer hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="relative mr-3">
                                <img src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=60&fit=crop" alt="教程" class="w-20 h-15 rounded-lg object-cover">
                                <div class="absolute inset-0 bg-black/30 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-play text-white text-lg"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">商家入驻完整流程</p>
                                <p class="text-xs text-gray-500 mt-1">从注册到开店的详细步骤</p>
                                <p class="text-xs text-blue-600 mt-1">
                                    <i class="fas fa-clock text-xs mr-1"></i>15:30
                                </p>
                            </div>
                        </div>
                    </div>

                    <div onclick="playVideo('product-management')" class="bg-white rounded-lg border border-gray-200 p-3 cursor-pointer hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="relative mr-3">
                                <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=80&h=60&fit=crop" alt="教程" class="w-20 h-15 rounded-lg object-cover">
                                <div class="absolute inset-0 bg-black/30 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-play text-white text-lg"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">商品上架与管理技巧</p>
                                <p class="text-xs text-gray-500 mt-1">提高商品曝光和转化率</p>
                                <p class="text-xs text-blue-600 mt-1">
                                    <i class="fas fa-clock text-xs mr-1"></i>12:45
                                </p>
                            </div>
                        </div>
                    </div>

                    <div onclick="playVideo('order-fulfillment')" class="bg-white rounded-lg border border-gray-200 p-3 cursor-pointer hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <div class="relative mr-3">
                                <img src="https://images.unsplash.com/photo-1586880244386-8b3e34c8382c?w=80&h=60&fit=crop" alt="教程" class="w-20 h-15 rounded-lg object-cover">
                                <div class="absolute inset-0 bg-black/30 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-play text-white text-lg"></i>
                                </div>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">订单处理和物流配送</p>
                                <p class="text-xs text-gray-500 mt-1">高效处理订单和发货流程</p>
                                <p class="text-xs text-blue-600 mt-1">
                                    <i class="fas fa-clock text-xs mr-1"></i>18:20
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Best Practices -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-gray-600 mr-2 rounded-full"></span>
                    最佳实践
                </h3>
                <div class="space-y-3">
                    <div onclick="openBestPractice('seo')" class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200 p-3 cursor-pointer hover:border-green-400 transition-all">
                        <div class="flex items-center">
                            <i class="fas fa-search text-green-600 text-lg mr-3"></i>
                            <div>
                                <p class="text-sm font-medium text-green-800">店铺SEO优化指南</p>
                                <p class="text-xs text-green-600">提升搜索排名和流量</p>
                            </div>
                        </div>
                    </div>

                    <div onclick="openBestPractice('marketing')" class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg border border-blue-200 p-3 cursor-pointer hover:border-blue-400 transition-all">
                        <div class="flex items-center">
                            <i class="fas fa-bullhorn text-blue-600 text-lg mr-3"></i>
                            <div>
                                <p class="text-sm font-medium text-blue-800">营销推广策略</p>
                                <p class="text-xs text-blue-600">提升店铺销量的方法</p>
                            </div>
                        </div>
                    </div>

                    <div onclick="openBestPractice('customer-service')" class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border border-purple-200 p-3 cursor-pointer hover:border-purple-400 transition-all">
                        <div class="flex items-center">
                            <i class="fas fa-heart text-purple-600 text-lg mr-3"></i>
                            <div>
                                <p class="text-sm font-medium text-purple-800">优质客服标准</p>
                                <p class="text-xs text-purple-600">提升客户满意度技巧</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Support -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-gray-600 mr-2 rounded-full"></span>
                    联系我们
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div onclick="contactOnlineService()" class="bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:bg-gray-50 transition-colors">
                        <i class="fas fa-comments text-blue-600 text-lg mb-2"></i>
                        <p class="text-xs font-medium">在线客服</p>
                        <p class="text-xs text-gray-500 mt-1">7×24小时</p>
                    </div>
                    <div onclick="callHotline()" class="bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:bg-gray-50 transition-colors">
                        <i class="fas fa-phone text-green-600 text-lg mb-2"></i>
                        <p class="text-xs font-medium">客服热线</p>
                        <p class="text-xs text-gray-500 mt-1">400-888-1000</p>
                    </div>
                    <div onclick="sendEmail()" class="bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:bg-gray-50 transition-colors">
                        <i class="fas fa-envelope text-orange-600 text-lg mb-2"></i>
                        <p class="text-xs font-medium">邮件支持</p>
                        <p class="text-xs text-gray-500 mt-1">help@platform.com</p>
                    </div>
                    <div onclick="submitTicket()" class="bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:bg-gray-50 transition-colors">
                        <i class="fas fa-ticket-alt text-purple-600 text-lg mb-2"></i>
                        <p class="text-xs font-medium">提交工单</p>
                        <p class="text-xs text-gray-500 mt-1">专人处理</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Search help
        function searchHelp() {
            alert('搜索帮助内容\n\n输入关键词快速查找相关帮助文档和教程');
        }

        // Quick guide functions
        function openQuickGuide(type) {
            const guides = {
                'getting-started': 'b2b-getting-started-guide.html',
                'product-management': 'b2b-product-guide.html',
                'order-processing': 'b2b-order-guide.html',
                'financial': 'b2b-financial-guide.html'
            };
            window.location.href = guides[type];
        }

        // Toggle FAQ sections
        function toggleFAQSection(section) {
            const faqDiv = document.getElementById(`${section}-faq`);
            const arrow = document.getElementById(`${section}-arrow`);
            
            if (faqDiv.classList.contains('hidden')) {
                faqDiv.classList.remove('hidden');
                arrow.style.transform = 'rotate(180deg)';
            } else {
                faqDiv.classList.add('hidden');
                arrow.style.transform = 'rotate(0deg)';
            }
        }

        // Open specific FAQ
        function openFAQ(faqId) {
            window.location.href = `b2b-faq-detail.html?id=${faqId}`;
        }

        // Video functions
        function viewAllVideos() {
            window.location.href = 'b2b-video-tutorials.html';
        }

        function playVideo(videoId) {
            window.location.href = `b2b-video-player.html?video=${videoId}`;
        }

        // Best practices
        function openBestPractice(practiceId) {
            window.location.href = `b2b-best-practice.html?practice=${practiceId}`;
        }

        // Contact functions
        function contactOnlineService() {
            window.location.href = 'b2b-customer-service.html';
        }

        function callHotline() {
            if (confirm('拨打客服热线？\n\n400-888-1000\n\n工作时间：9:00-21:00')) {
                // In real app, would initiate phone call
                showToast('正在为您拨打客服热线...');
            }
        }

        function sendEmail() {
            alert('邮件支持\n\n发送邮件至：help@platform.com\n\n我们会在24小时内回复您的问题');
        }

        function submitTicket() {
            window.location.href = 'b2b-submit-ticket.html';
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('帮助中心已加载');
        });
    </script>
</body>
</html>